<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="th/m/include/head_css :: head(~{::title}, ~{::link}, ~{::style})">
    <meta charset="utf-8">
    <title>处理流程</title>
    <link rel="stylesheet" th:href="@{/weixin/css/css.css}"/>
    <link rel="stylesheet" th:href="@{/weixin/css/at_flow.css}"/>
    <link rel="stylesheet" th:href="@{/weixin/css/photoswipe.css}">
    <link rel="stylesheet" th:href="@{/weixin/css/photoswipe-default-skin/default-skin.css}">
    <link rel="stylesheet" th:href="@{/lte/css/style.css?v=4.1.0}"/>
    <style>
        body {
            font-size: 15px;
            background-color: #f6f8fe !important;
        }
        .segment-wrap {
            padding: 5px 8px;background-color: #fff;
        }
        .mui-segmented-control {
            margin-bottom: 5px;
        }
        .content-box {
            background-color: #fff;
            margin: 15px;
            padding-bottom: 5px;
            border-radius: 8px;
        }
        .mui-input-group:before,
        .mui-input-group:after {
            background-color: #fff;
        }
        .mui-input-group .mui-input-row {
            min-height: unset !important;
            padding-right: 10px;
            padding-top: 2px;
            padding-bottom: 7px;
        }
        .mui-input-group .mui-input-row:after {
            right: 15px;
        }
        #starterSelBox.mui-input-row:after {
            content: '' !important;
            background-color: #fff;
        }
        .nestSheetSelect, .module-field-select, .moduleSelect {
            margin-right: 10px !important;
            padding: 10px !important;
        }

        .mui-input-row .input-icon {
            width: 49.5%;
            float: left;
        }
        .mui-input-row a {
            margin-right: 10px;
            float: right;
            text-align: left;
            line-height: 1.5;
        }

        #captureFile {
            display: none;
        }

        .info-box {
            width: 80%;
            margin: 120px auto;
            height: 60px;
            padding: 15px;
            border: 1px solid #ddd;
            text-align: center;
            font-size: 12px;
        }

        .info-box .mui-icon {
            font-size: 12px;
            margin-right: 10px;
        }

        .btn-del-img {
            width: 32px;
            height: 32px;
            position: absolute;
            left: 90px;
            top: -10px;
            z-index: 1;
        }

        .btn-del-img img {
            width: 16px;
            height: 16px;
            margin-top: 5px;
        }

        #plusDescBox {
            margin: 10px;
        }

        #btnDelPlus {
            color: red;
            margin-left: 10px;
        }

        .mui-radio input[type='radio'] {
            margin-top: -5px;
        }

        .border0 {
            border: 0 !important;
        }

        .mui-input-group .mui-button-row {
            height: 55px !important;
            position: inherit !important;
            paddin-bottom: 10px !important;
        }

        .mui-button-row {
            height: inherit !important;
            position: inherit !important;
            paddin-bottom: 10px !important;
        }

        .user-box {
            display: block;
        }

        #replyContent {
            width:96%;
            height: 100px;
        }

        .cwsWorkflowResult-box {
            padding: 10px 0 10px 10px
        }
        #cwsWorkflowResult {
            width:100%;
            height: 100px;
        }

        /*@用户*/
        .mention {
            color: #3494f1;
        }

        #starterSelBox {
            margin: 5px 15px;
        }
        .cust-badge {
            padding: 10px;
            margin-right: 5px;
        }
        .badge-user {
            margin-right:10px;
            font-size: 16px;
        }
        .badge-closer {
            padding-bottom: 5px;
            font-size: 20px;
        }
        .starter-sel-action {
            margin-top: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #E5E6E7;
        }
        .starter-sel-action-title {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        .starter-sel-action .mui-icon {
            font-size: 28px;
        }
        .starter-sel-action input[type=radio] {
            width: 15px;
            height: 15px;
            margin-right: 5px;
        }
        .starter-sel-action input[type=checkbox] {
            width: 15px;
            height: 15px;
            margin-right: 5px;
        }
        .vertical-date {
            font-size: 14px;
        }
    </style>
</head>
<body>
<!-- mui.js 不要放到</body>的前面，因为页面中如果return了，后退按钮就不生效了 -->
<!--<script type="text/javascript"
        src="http://api.map.baidu.com/getscript?v=3.0&ak=3dd31b657f333528cc8b581937fd066a"></script>-->
<script
        type="text/javascript"
        src="https://api.tianditu.gov.cn/api?v=4.0&tk=31291e50f42ece7b3f1a5deca4c82ddc"
></script>
<header class="mui-bar mui-bar-nav" th:style="${nav.isUniWebview ? 'display:none' : ''}">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">处理流程</h1>
</header>
<div class="mui-content">
    <div th:if="${!isInit}" class="segment-wrap">
        <div id="segmentedControl" class="mui-segmented-control">
            <a class="mui-control-item mui-active" href="#item1">
                待办流程
            </a>
            <a class="mui-control-item" href="#item2">
                处理过程
            </a>
        </div>
    </div>
    <div class="content-box">
        <div id="item1" class="mui-control-content mui-active">
            <form id="free_flow_form" action="../../public/flow_dispose_free_do" method="post" enctype="multipart/form-data">
            </form>
            <form class="mui-input-group" id="flow_form">
                <input id="cwsHiddenFields" name="cwsHiddenFields" type="hidden"/>
            </form>
            <input type="file" id="captureFile" name="upload" style="cursor: pointer"/>
            <div th:if="${isFlowStarted && isReply}" class="annex-group">
                <div class="reply-form" style="display:none; margin-bottom:10px">
                    <div class="mui-input-row mui-input-range" style="display: none">
                        <label>进度<span id="progressLabel" style="margin-left:10px"></span></label>
                        <input id="progress" name="progress" type="range" min="0" max="100"
                               onchange="$('#progressLabel').text(mui('#progress')[0].value)">
                    </div>
                    <div class="mui-input-row" data-code="replyContent">
                        <label style="width: 100%">
                            <span>回复</span><span style='color:red;'>*</span>
                            <span class="mention" style="margin-left: 20px" onclick="atUser()">@用户</span>
                        </label>
                        <div style="text-align:center">
                            <textarea id="replyContent" name="replyContent" placeholder="请输入回复内容"></textarea>
                        </div>
                    </div>
                    <div class="mui-input-row mui-checkbox" data-code="isSecret">
                        <label><span>隐藏</span><span style='color:red;'>*</span></label>
                        <input type="checkbox" id="isSecret" name="isSecret" value="1"/>
                    </div>
                    <div class="mui-button-row">
                        <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined btn-ok">确定</button>
                    </div>
                </div>
            </div>
        </div>

        <div th:if="${!isInit}" id="item2" class="mui-control-content" style="padding-top: 15px">
            <div style="margin-left: 20px; margin-bottom: 5px">标题：[[${title}]]</div>
            <div style="margin-left: 20px">流程号：[[${flowId}]]</div>
            <div id="vertical-timeline" class="vertical-container light-timeline">
                <div th:each="json, state : ${myActions}" class="vertical-timeline-block" style="margin-bottom:10px">
                    <div class="vertical-timeline-icon blue-bg">
                        <i class="fa fa-user"></i>
                    </div>
                    <div class="vertical-timeline-content">
                        <h3>[[${json.title}]]</h3>
                        <!--<a th:if="${isRecall and json.canRecall}" href="#" class="btn btn-sm btn-success btn-recall"
                           th:attr="'myActionId=' + ${json.id}">撤回</a>-->
                        <p class="vertical-date">
                            <span>[[${json.userRealName}]]</span><br/>
                            <span>[[${json.checkStatusName}]][[${json.resultValueDesc}]]</span><br/>
                            <th:block th:if="${not #strings.isEmpty(json.receiveDate)}">
                            <span class="receive-date">收到时间:&nbsp;[[${json.receiveDate}]]</span><br>
                            </th:block>
                            <th:block th:if="${not #strings.isEmpty(json.checkDate)}">
                            <span class="check-date">处理时间:&nbsp;[[${json.checkDate}]]</span><br>
                            </th:block>
                            <span class="remark" th:if="${isRemarkShowInProcessList}">
                                意见: [[${json.result}]]
                            </span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/weixin/js/macro/macro.js}"></script>
<script th:src="@{/weixin/js/macro/macro_uploader_ctl.js}"></script>
<script th:src="@{'/weixin/flow/form_js/' + ${formCode} + '.jsp?flowId=' + ${flowId} + '&myActionId=' + ${myActionId} + '&skey=' + ${nav.skey} + '&Fcode=' + flowTypeCode + '&Ftype=' + ${type} + '&Ftitle=' + ${title}}"></script>
<div th:replace="th/m/include/navbar :: nav(${nav}, false, '', false)"></div>
<script th:inline="javascript">
    var isUniWebview = [[${nav.isUniWebview}]];
    $(function() {
        // 用于HBuilderX手机端
        if (!mui.os.plus || isUniWebview) {
            // 必须删除，而不能是隐藏，否则mui-bar-nav ~ mui-content中的padding-top会使得位置下移
            $('.mui-bar').remove();
        }

        if (isDingTalk()) {
            $('.mui-bar').remove();
        }
    })

    var appProp = {"type": "module", "isOnlyCamera": [[${isOnlyCamera}]], "btnAddShow": 0, "btnBackUrl": ""};

    function callJS() {
        return appProp;
    }

    var iosCallJS = JSON.stringify(appProp);

    function setIsOnlyCamera(isOnlyCamera) {
        appProp.isOnlyCamera = isOnlyCamera;
        iosCallJS = JSON.stringify(appProp);
    }

    function resetIsOnlyCamera() {
        appProp.isOnlyCamera = [[${isOnlyCamera}]]; // 用以在图像宏控件拍完照后，恢复底部拍照按钮的设置
    }

    console.log('mui.os.ios', mui.os.ios, 'parseFloat(mui.os.version)', parseFloat(mui.os.version));
    if (mui.os.ios) {
        if (parseFloat(mui.os.version) < 16.5) {
            includFile(getContextPath() + "/weixin/js/", ['mui.picker_ios16.min.js']);
            includFile(getContextPath() + "/weixin/css/", ['mui.picker_ios16.min.css']);
        } else {
            includFile(getContextPath() + "/weixin/js/", ['mui.picker.min.js']);
            includFile(getContextPath() + "/weixin/css/", ['mui.picker.min.css']);
        }
    } else {
        includFile(getContextPath() + "/weixin/js/", ['mui.picker_ios16.min.js']);
        includFile(getContextPath() + "/weixin/css/", ['mui.picker_ios16.min.css']);
    }
</script>
<script type="text/javascript" th:src="@{/weixin/js/jweixin-1.6.0.js}"></script>
<script type="text/javascript" th:src="@{/weixin/js/uniapps.js}"></script>
<script type="text/javascript" th:src="@{/weixin/js/photoswipe.js}"></script>
<script type="text/javascript" th:src="@{/weixin/js/photoswipe-ui-default.js}"></script>
<script type="text/javascript" th:src="@{/weixin/js/photoswipe-init-manual.js}"></script>
<script type="text/javascript" th:src="@{/weixin/js/base/mui.form.js}"></script>
<script type="text/javascript" th:src="@{/weixin/js/mui.flow.wx.js}"></script>
<!--解决iphone拍照变横向的问题-->
<script type="text/javascript" th:src="@{/weixin/js/exif.js}"></script>
<script type="text/javascript" th:src="@{/weixin/js/jquery.raty.min.js}"></script>
<script type="text/javascript" th:src="@{/weixin/js/utils.js}"></script>
<script th:inline="javascript">
    var content = document.querySelector('.mui-content');
    var skey = [[${nav.skey}]];
    var myActionId = [[${myActionId}]];
    var flowTypeCode = [[${flowTypeCode}]];
    var title = [[${title}]];
    var type = [[${type}]];
    var isUniWebview = [[${nav.isUniWebview}]];
    var options = {
        "skey": skey,
        "title": title,
        "myActionId": myActionId,
        "type": type,
        "formCode": [[${formCode}]],
        "code": flowTypeCode,
        "isUniWebview": isUniWebview
    };

    options.extraData = [(${extraData})];

    window.flow = new mui.Flow(content, options);
    window.flow.flowDisposeInit();

	// mui.init放在flowDisposeInt的后面，以使得插件，如：switch range，能够正常初始化，否则这些动态生成的控件需手动初始化
    if (mui.os.plus) {
        // 注册beforeback方法，以使得在流程处理完后退至待办列表页面时能刷新页面
        mui.init({
            [# th:if = "${nav.isUniWebview}"]
            keyEventBind: {
                backbutton: false // 关闭back按键监听
            },
            [/]
            beforeback: function () {
                //获得父页面的webview
                var list = plus.webview.currentWebview().opener();
                //触发父页面的自定义事件(refresh),从而进行刷新
                mui.fire(list, 'refreshList');
                //返回true,继续页面关闭逻辑
                return true;
            }
        });

        mui.plusReady(function() {
            if (window.plus) {
                plus.webview.currentWebview().setPullToRefresh({support: false});
            }
        });
    }

    $(function () {
        maxSize = {
            width: [[${photoMaxSize}]],
            height: [[${photoMaxSize}]],
            level: [[${intPhotoQuality}]],
        };

        // setTimeout(setAgreeBtnName, 1000);

        $('.btn-ok').click(function () {
            /*var _tips = "";
            jQuery("div[data-isnull='false']").each(function (i) {
                var _code = jQuery(this).data("code");
                var _val = jQuery("#" + _code).val();
                if (_val == undefined || _val == "") {
                    var _text = jQuery(this).find("span:first").text();
                    _tips += _text + " 不能为空\r\n"
                }
            });
            if (_tips != null && _tips != "") {
                mui.toast(_tips);
                return;
            }*/

            if (jQuery('#replyContent').val().trim() == '') {
                mui.toast('回复内容不能为空');
                return;
            }

            var progress = mui('#progress')[0].value;
            var isSecret = jQuery('#isSecret').is(":checked") ? 1 : 0;
            $.ajax({
                type: "post",
                url: "../../public/android/flow/addReply.do",
                data: "skey=" + [[${nav.skey}]] + "&content=" + jQuery('#replyContent').val() + "&isSecret=" + isSecret + "&progress=" + progress + "&flowId=" + [[${flowId}]] + "&actionId=" + [[${actionId}]],
                dataType: "html",
                contentType: "application/x-www-form-urlencoded; charset=iso8859-1",
                beforeSend: function (XMLHttpRequest) {
                },
                success: function (data, status) {
                    data = $.parseJSON(data);
                    if (data.ret == "1") {
                        var $ul = $('.reply-ul');
                        $ul.show();
                        var li = '<li class="mui-table-view-cell">';
                        li += '<div class="reply-header">';
                        li += '<span class="reply-name">' + [[${realName}]] + '</span>';
                        // li += '<span class="reply-progress">' + progress + '%</span>';
                        li += '<span class="reply-date">' + formatDateTime(new Date()) + '</span>';
                        li += '</div>';
                        li += '<div class="reply-content">' + highlightMentions(data.content) + '</div>';
                        li += '</li>';
                        $ul.append(li);

                        $('#progressLabel').text(progress);
                        $('#replyContent').val('');
                        // 不删除，使可以继续回复
                        // $('.reply-form').remove();
                    }
                    mui.toast(data.msg);
                },
                error: function (XMLHttpRequest, textStatus) {
                    alert(XMLHttpRequest.responseText);
                }
            });
        });
    });

    getFormJs([[${formCode}]], [[${nav.skey}]]);

    $(function () {
        watermark([[${realName}]]);
    });

    function atUser() {
        selectUserWinForAtUserInReply(skey);
    }
</script>
<script th:inline="javascript">
    [(${formJs})]
</script>
</body>
</html>
